Revision:
The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element.
A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle.
code:
<div>
<details>
<summary>Summary</summary>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</details>
<details>
<summary>Summary</summary>
<h4>Test headline</h4>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</details>
<details>
<summary>Summary</summary>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</details>
<details>
<summary>Summary</summary>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</details>
<details>
<summary>Summary</summary>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</details>
</div>
<style>
details {width: 50%; margin: 0 auto; background: #282828; margin-bottom: 0.5vw; box-shadow: 0 0.1vw 1vw -0.5vw rgba(0, 0, 0, 0.4);
border-radius: 0.5vw; overflow: hidden; color:white; line-height: 1.5; letter-spacing:0.02vw;margin-top: 1vw;}
summary {padding: 1vw; display: block; background: #333; padding-left: 2vw;position: relative; cursor: pointer;}
summary:before {content: "";border-width: 0.4vw; border-style: solid;border-color: transparent transparent transparent aliceblue;
position: absolute; top: 1.3vw; left: 1vw; transform: rotate(0); transform-origin: 0.2vw 50%; transition: 0.25s transform ease;}
details[open] > summary:before {transform: rotate(90deg);}
details summary::-webkit-details-marker {display: none;}
details > ul {padding-bottom: 1vw; margin-bottom: 0;}
</style>
You can use the <details> element to provide additional information on fields that new users might need help with.
Click on the help icon to toggle the help text.
code:
<div class="panel">
<p class="spec">Click on the help icon to toggle the help text.</p>
<form>
<div class="form-group">
<label for="participants" class="form-group-label">Name</label>
<div class="form-group-input-container">
<input type="text" id="participants" class="form-control"
placeholder="e.g. Harry Potter">
<details>
<summary>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-help-circle">
<circle cx="12" cy="12" r="10" />
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
<line x1="12" y1="17" x2="12.01" y2="17" /></svg>
</summary>
<small class="form-group-help">
The name that will be displayed in your public profile.
</small>
</details>
</div>
</div>
</form>
</div>
<style>
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400; 600&display=swap");
.panel {height: 15vw;width: 40vw; max-width: 90%; margin: 2vw auto 0; box-shadow: 0 0.4vw 0.6vw -0.1vw rgba(0, 0, 0, 0.1),
0 0.2vw 0.4vw -.1vw rgba(0, 0, 0, 0.06); padding: 1vw;border-radius: 1vw; background: aliceblue;}
.form-group {font-size: 1vw; height: 4vw; margin-top: 1.6vw;}
.form-group-input-container {position: relative;}
.form-control {height: 2vw; width: 50%; border-radius: 1vw; padding: 0 1vw; border: 0.1vw solid #a0aec0; font-size: 1vw;
color: #4a5568; font-family: inherit;}
.form-group-label {font-weight: bold; display: block; margin-bottom: 0.4vw;}
.form-group-help {font-size: 1vw; margin-top: 0.5vw; display: block; color: white;}
summary{background-color:black; color:red; width:20vw; height: 1vw;}
details {position: relative; top: 0; right: 0; display: block;outline: none; color: orange;opacity: 0.5; display: flex;
align-items: center;justify-content: center;}
details:hover {cursor: pointer;opacity: 1;}
svg {width: 1vw; height: 1vw;}
</style>
code:
<nav>
<details id="details">
<summary id="summary">Best Foods</summary>
<div class="dropdown-wrapper">
<ul>
<li><a href="#">Shephard's Pie</a></li>
<li><a href="#">Empanadas</a></li>
<li><a href="#">Pound Cakes</a></li>
<li><a href="#">Tacos</a></li>
<li><a href="#">ALL OTHER PIES</a></li>
</ul>
</div>
</details>
</nav>
<style>
#summary {cursor: default; background-color: yellowgreen;}
#details{background-color:lightgreen;}
.dropdown-wrapper {background-color: lightblue;}
#details[open] .dropdown-wrapper {animation: fade-in 0.5s forwards;}
#details.summary-closing[open] .dropdown-wrapper {animation: fade-out 0.5s forwards;}
@keyframes fade-in{
0% {transform: translateY(-2vw); opacity: 0;}
100% {transform: translateY(0); opacity: 1;}
}
@keyframes fade-out{
0% {transform: translateY(-0); opacity: 1;}
100% {transform: translateY(-2vw); opacity: 0;}
}
</style>